<template>
	<view class="content">
		<view class="top_info">
			<view class="info_item">
				<view class="item_title">标题
					<view class="important">*</view>
				</view>
				<view class="item_input">
					<u--input border="none" placeholder="请输入标题名称" v-model="form.title" clearable></u--input>
				</view>

			</view>
			<view class="info_item">
				<view class="item_title">内容
					<view class="important">*</view>
				</view>
				<view class="item_input">
				</view>

			</view>
			<!-- 内容填写框 -->
			<view class="address">
				<u--textarea :height="235" :maxlength="2000" count border="none" v-model="form.content"
					placeholder="请输入内容"></u--textarea>

			</view>
		</view>
		<!-- 实验室照片 -->
		<view class="lab_photo">

			<view class="photo_top">图片
				<!-- <view class="important">*</view> -->
			</view>
			<view class="photo_bottom">

				<view class="b_upload">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="90" height="90"></u-upload>


				</view>

			</view>
		</view>
		<!-- 底部提交按钮 -->
		<view class="submit">
			<u-button type="primary" text="提交" @click="handleSubmit"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		sendOrUpdateTrends
	} from '../../api/trends.js'
	export default {
		data() {
			return {
				fileList1: [],
				form: {
					title: "",
					content: ""
				}
			};
		},
		onLoad(options) {

			if (options.info) {
				let info = JSON.parse(decodeURIComponent(options.info))
				this.form = {
					...info
				}
				if (info.coverPhoto) {
					let obj = {
						url: info.coverPhoto
					}
					this.fileList1.push(obj)
				}

			}

		},
		methods: {
			handleSubmit() {
				let user = uni.getStorageSync('user')
				// let tuser = uni.getStorageSync('tuser')
				this.form.authorId = user.userId
				if (!this.form.title) {
					uni.$u.toast("请先输入标题")
					return
				}
				if (!this.form.content) {
					uni.$u.toast("请先输入内容")
					return
				}


				sendOrUpdateTrends(this.form).then(res => {
					uni.$u.toast("操作成功！")
					setTimeout(() => {
						uni.navigateBack({
							url: "/subpages/admin_trends/admin_trends"
						})
					}, 800)
				}).catch(err => {
					uni.$u.toast("操作失败！")
				})


			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)


					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.form.coverPhoto = this.fileList1[0].url
				// console.log(this.form);

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://127.0.0.1:7001/imgUpload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let result = JSON.parse(res.data)

							setTimeout(() => {
								resolve(result.data)
							}, 1000)
						}
					});
				})
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.form.coverPhoto = ""
				// console.log(this.form);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		padding: 20upx;
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.top_info {
			width: 100%;
			min-height: 680upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			padding-bottom: 46upx;

			.info_item {
				box-sizing: border-box;
				padding: 0 30upx;
				width: 100%;
				min-height: 95upx;
				background-color: #fff;
				border-bottom: 3upx solid #f1f1f1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.item_title {
					position: relative;
					width: 112upx;
					font-weight: 600;

					.important {
						position: absolute;
						top: -2upx;
						left: -20upx;
						font-size: 36upx;
						color: red;


					}

				}

				.item_input {
					flex: 1;
					height: 100%;
					// margin-top: 7upx;
				}
			}

			.address {
				width: 100%;
				height: 200upx;
			}
		}


		.lab_photo {
			position: relative;
			width: 100%;
			min-height: 295upx;
			background-color: #fff;
			box-shadow: 5upx 6upx 13upx rgba(0, 0, 0, .25);
			border-radius: 10upx;
			overflow: hidden;
			margin-top: 20upx;
			// padding-bottom: 30upx;
			// 
			// 

			.photo_top {
				position: relative;
				width: 100%;
				height: 95upx;
				font-size: 30upx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30upx;
				border-bottom: 3upx solid #f1f1f1;

				.important {
					position: absolute;
					top: 26upx;
					left: 10upx;
					// top: -2upx;
					// left: -20upx;
					font-size: 36upx;
					color: red;


				}
			}

			.photo_bottom {
				// 
				width: 100%;
				box-sizing: border-box;
				padding: 20upx;

				.b_upload {
					position: relative;
					width: 200upx;
					height: 200upx;
					width: 100%;

				}
			}
		}

		.submit {
			width: 100%;
			height: 50upx;
			box-sizing: border-box;
			// padding: 0 20upx;
			margin-top: 35upx;
			margin-bottom: 35upx;
		}
	}
</style>